codepedia.de
HTML
CSS
Javascript
  • Javascript
  • JS for Web
  • JQuery
  • Async JS
Backend
  • Basics
  • Node
  • Express
  • Connect DB to Node
GIT
Databases
  • Basics
  • SQL
  • No SQL
Vue
  • Vue
  • Vue Router
  • Vue-State-Management
  • Vite
  • Quasar
  • Nuxt
  • Vue Animation
  • VuePress (opens new window)
Misc.
  • Command Line
  • VS Code
  • Jetbrains IntelliJ
  • Markdown
  • Design
  • Performance
  • Clean Code
  • Fake API
  • SSH
About/Imprint
HTML
CSS
Javascript
  • Javascript
  • JS for Web
  • JQuery
  • Async JS
Backend
  • Basics
  • Node
  • Express
  • Connect DB to Node
GIT
Databases
  • Basics
  • SQL
  • No SQL
Vue
  • Vue
  • Vue Router
  • Vue-State-Management
  • Vite
  • Quasar
  • Nuxt
  • Vue Animation
  • VuePress (opens new window)
Misc.
  • Command Line
  • VS Code
  • Jetbrains IntelliJ
  • Markdown
  • Design
  • Performance
  • Clean Code
  • Fake API
  • SSH
About/Imprint
  • VUE

    • Adding Vue
    • VS Code Settings Vue
    • Vue Project-Structure
    • Vue Data-Binding
    • Vue Conditional Rendering
    • Vue List Rendering
    • Vue Events
    • Vue Dynamic Styling
    • Vue Advanced reactivity
    • Vue Template Refs
    • Vue Livecycle-Hooks
    • VUE Components
    • VUE Passing Data
    • VUE Slots
    • VUE Dynamic Components
    • VUE Forms
    • VUE Teleporting
    • VUE Axios
    • Vue Options-API
    • Vue Composition-API
    • Vue Script-Setup
    • Vue Composables - Hooks
    • Vue Mixins
    • VUE Styleguide
    • VUE Links

# Vue Livecycle-Hooks

// when component is mounted:
mounted() {
  console.log('mounted');
},
Hook when?
beforeCreate
created
beforeMount
mounted runs, when vue is ready
beforeUpdate
updated
beforeDestroy
destroyed

https://v3.vuejs.org/guide/composition-api-lifecycle-hooks.html#lifecycle-hooks (opens new window)

https://v3.vuejs.org/guide/instance.html#lifecycle-diagram (opens new window)


# Fetch data

often on the mounted-lifecycle -> add v-if to the display-elements!

← Vue Template Refs VUE Components →